import { AllHTMLAttributes, createElement, type FC } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { listItemDefaultProps } from './defaultProps';
import type { ListItemOptions } from './type';
import ListContent from './ListContent';

export interface ListItemProps
  extends ListItemOptions,
    Omit<AllHTMLAttributes<HTMLElement>, 'as' | 'content' | 'value'> {}

const ListItem: FC<ListItemProps> = (props) => {
  const { className, as, icon, content, value, active, children, forwardedRef, ...listItemProps } = props;

  return createElement(
    as!,
    { ref: forwardedRef, className: classNames('item', { active }, className), value, ...listItemProps },
    children || [
      icon && <Icon key="icon" name={icon} />,
      content && <ListContent key="content">{content}</ListContent>,
    ],
  );
};

ListItem.displayName = 'ListItem';
ListItem.defaultProps = listItemDefaultProps;

export default ListItem;
